import { useEffect } from 'react';
import { throttle } from 'lodash';

const isTouchBottom = (handler) => {
   // 文档显示区域高度
   const showHeight = window.innerHeight;
   // 网页卷曲高度
   const scrollTopHeight = document.body.scrollTop || document.documentElement.scrollTop;
   // 所有内容高度
   const allHeight = document.body.scrollHeight;
   // (所有内容高度 = 文档显示区域高度 + 网页卷曲高度) 时即为触底
   if (allHeight <= showHeight + scrollTopHeight) {
      handler();
   }
};

//   将是否触底函数进行 节流 处理
const useTouchBottom = (fn) => {
   const useFn = throttle(() => {
      if (typeof fn === 'function') {
         // 此处调用 加载更多函数
         isTouchBottom(fn);
      };
   }, 800);

   useEffect(() => {
      // 开启侦听器,监听页面滚动
      window.addEventListener('scroll', useFn);
      // 组件销毁时移除侦听器
      return () => {
         window.removeEventListener('scroll', useFn);
      };
   }, []);
};

export default useTouchBottom;